<template>
    <div>
        <el-form class="form-box" label-position="left">
            <el-row :gutter="20">
                <el-col :span="8" :xs="24" :sm="24" :lg="24">
                    <el-form-item class="form-item" label="新增人员：">
                        <el-tag
                            :key="tag.id"
                            v-for="tag in memberList"
                            closable
                            :disable-transitions="false"
                            style="height: 36px;line-height: 36px"
                            @close="handleClose(tag)">
                            {{tag.user_name}}({{tag.ldap}})
                        </el-tag>
                        <div style="margin: 10px 0 0 82px">
                            <el-autocomplete
                                v-model="tagValue"
                                :fetch-suggestions="querySearchAsync"
                                @select="handleSelect"
                                placeholder="请输入人员"
                                clearable
                                multiple
                                collapse-tags
                                ></el-autocomplete>
                            <!-- <el-button class="button-new-tag" type="info" @click="handleInputCancel">取消</el-button> -->
                        </div>
                        <!-- <div v-else style="margin: 10px 0 0 70px">
                            <el-button class="button-new-tag" type="primary" @click="showInput">+ 新增人员</el-button>
                        </div> -->
                        
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <div class="form-btn">
            <el-button type="primary" @click="handleInputConfirm">保存</el-button>
        </div>
            
        
    </div>
</template>

<script>
import { getHeaderName } from '@/app.config'
export default {
    name: 'Talent',
    props: {
                deptIdA: Number 
            },
    data() {
        return {
            memberList: [],
            tagVisible: false,
            tagValue: '',
            options: [],
            timeout: null,
            selectMan: {},
            departmentAllData: [],
            department:''
        }
    },
    created(){
        this.initTable()
    },
    mounted() {
        
    },
    methods: {
        initTable() {
            console.log(787,this.deptIdA)
            this.$axios({
                url: process.env.VUE_APP_SOURSE_MANAGE_HOST + '/api/v1/expatriate_list?dept_id='+this.deptIdA ,
                method: "get",
                headers: getHeaderName(),
            }).then(res => {
                console.log(res,444)
                // this.memberList = res.data.data
            })
        },
        handleClose(tag) {
            this.$axios({
                url: `${process.env.VUE_APP_SOURSE_MANAGE_HOST}/api/v1/department/permission/${tag.id}`,
                method: "delete",
                headers: getHeaderName(),
            }).then(res => {
                if(res.data.code == 200) {
                    this.$message.success(res.data.message)
                    this.tagVisible = false;
                    this.tagValue = '';
                } else {
                    this.$message.error(res.data.message)
                }
            })
        },
        querySearchAsync(queryString, cb) {
            let members = [{}];
            this.$axios({
                url: process.env.VUE_APP_SOURSE_MANAGE_HOST + '/api/v1/employee/list',
                method: "get",
                headers: getHeaderName(),
                params: {
                    keywords: queryString
                }
            }).then(res => {
                for (let i of res.data.data) {
                    i.value = i.name + '(' + i.ldap + ')'
                }
                members = res.data.data;
                cb(members);
            }).catch(error => {
                console.log(error);
            });
        },
        handleSelect(e) {
            console.log(e)
            this.selectMan = e
        },
        createFilterMember(queryString) {
            return (item) => {
                return item.name.indexOf(queryString) === 0;
            };
        },
        showInput() {
            this.tagVisible = true;
        },
        handleInputCancel() {
            this.tagVisible = false;
            this.tagValue = '';
        },
        handleInputConfirm() {
            if(this.department == '') {
                this.$message.error("协管部门不能为空");
                return false;
            }
            if(this.tagValue == '') {
                this.$message.error("协管人员不能为空");
                return false;
            }
            this.$axios({
                url: process.env.VUE_APP_SOURSE_MANAGE_HOST + '/api/v1/department/permission',
                method: "post",
                headers: getHeaderName(),
                data: {
                    ldap: this.selectMan.ldap,
                    dept_id: this.department
                }
            }).then(res => {
                if(res.data.code == 200) {
                    this.$message.success(res.data.message)
                    this.tagVisible = false;
                    this.tagValue = '';
                    this.selectMan = {}
                    // this.initTable(this.department)
                } else {
                    this.$message.error(res.data.message)
                }
            })
            
        },
        

    },
    watch: {

    }
}
</script>
<style lang="scss" scoped>
.form-box {
    min-height: 300px;
}
.form-btn {
    text-align: right;
}
  .el-tag + .el-tag {
    margin-left: 10px;
  }
  .button-new-tag {
    margin-left: 10px;
    height: 36px;
    line-height: 34px;
    padding-top: 0;
    padding-bottom: 0;
  }
  .input-new-tag {
    width: 90px;
    margin-left: 10px;
    vertical-align: bottom;
  }
  .title {
      font-size: 16px;
      margin-bottom: 20px;
  }
</style>


